<template>
  <div>
    <div class="hoder-top"><span>♥</span>猜你喜欢</div>
    <ul class="hoder-ul">
        <li v-for="item in hoderList" :key="item.id" class="boder-bottom" @click="rotpus">
            <img :src="item.Imgurl" alt="">
            <div>
                <h2>{{item.title}}</h2>
                <p><span>{{staer(item.staer)}}</span>{{item.pkder}}条评论</p>
                <div>
                    <p><span>￥{{item.mnny}}</span>起</p>
                    <span>{{item.derps}}</span>
                </div>
            </div>
        </li>
    </ul>
  </div>
</template>


<script>

export default {
  name: 'Home',
  props: ['hoderList'],
  data () {
    return {
       
      }
    },
   methods: {
       staer(uber) {
           let ster = "";
           for(let i=0; i<uber; i++) {
               ster += "★"
           }
           return ster;
       },
       rotpus() {
           this.$router.push('detail');
       }
   }
}
</script>

<style lang="less" scoped>
  .hoder-top {
    line-height: 0.4rem;
    font-size: 0.16rem;

    >span {
        font-size: 0.24rem;
        color: red;
    }
  }

  .hoder-ul {
    

    >li {
        display: flex;
        font-size: 0.14rem;
        padding: 0.05rem;

        >img {
            width: 1.2rem;
            height: 1.2rem;
        }

        >div {
            padding: 0.1rem;
            flex: 1;

            >h2 {
                font-size: 0.2rem;
                font-weight: bold;
            }

            >p {
                margin-top: 0.05rem; 
                line-height: 0.4rem;

                >span {color: #ffbb00; padding-right: 0.2rem;line-height: 0.3rem;display: inline-block;transform: translateY(-0.02rem);}
            }

            >div {
                display: flex;
                justify-content: space-between;
                align-items: center;

                >p {

                    >span {
                        font-size: 0.24rem;
                        color: #f60;
                    }
                }

                >span {}
            }
        }
    }
  }
</style>
